<template>
  <div class="home" style="padding-bottom: 40px">
    <div class="searchBar">
      <!-- 头部搜索栏 -->
      <div class="top-box">
        <h2 style="font-size: 20px">公司</h2>
        <van-search
          shape="round"
          v-model="value"
          placeholder="请输入搜索关键词"
        />
      </div>
      <!-- 广告图片 -->
      <div class="top-img">
        <van-image
          width="100%"
          src="http://www.huangjiangjun.top/heimamm-mobile/img/ios3x_img_banner@3x.9ed762f2.png"
        />
      </div>
      <!-- 筛选框 -->
      <div class="filter-box">
        <div class="left-box">
          <span>推荐 </span>
          <span>距离</span>
          <span>评分</span>
        </div>
        <span class="filterList"> 筛选 </span>
      </div>
    </div>
    <!-- 公司列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in addressList" :key="item.id">
        <!-- 使用 title 插槽来自定义标题 -->

        <div class="company-detail">
          <img
            :src="baseURL + item.logo"
            alt=""
            style="width: 65px; height: 65px; margin-right: 10px"
            @click="$router.push(`companyDetail/${item.id}`)"
          />
          <div class="top-box">
            <div class="letf-box">
              <h4 style="font-weight: 400; font-size: 15px">{{ item.name }}</h4>
              <div class="address">{{ item.region }},{{ item.distance }}</div>

              <van-tag
                color="#f7f4f5"
                text-color="#b4b4bd"
                style="height: 15px; margin: 10px"
                >{{ item.step }}</van-tag
              >
              <van-tag
                color="#f7f4f5"
                text-color="#b4b4bd"
                style="height: 15px; margin: 10px"
                >{{ item.type }}</van-tag
              >
              <van-tag
                color="#f7f4f5"
                text-color="#b4b4bd"
                style="height: 15px; margin: 10px"
                >{{ item.scale }}</van-tag
              >
              <div style="margin: 0px; font-size: 10px; white-space: nowrap">
                在招职位:
                <span class="propleNumber">{{ item.positions }}</span>
                /最后更新时间{{
                  item.updated_at.slice(0, 10).replace(/-/g, '.')
                }}
              </div>
            </div>

            <div class="right-box">{{ item.score }}分</div>
          </div>
        </div>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import { addressApi } from '@/api/index'
export default {
  data () {
    return {
      value: '',
      // list列表
      list: [],
      loading: false,
      finished: false,
      addressList: [],
      baseURL: 'http://119.91.151.46:1337',
      limit: 5
    }
  },
  // async created () {
  //   const res = await addressApi(10)
  //   console.log(res)
  //   if (res.data.code === 200) {
  //     this.addressList = [...this.addressList, ...res.data.data.list]
  //   }
  // },
  methods: {
    async onLoad () {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // setTimeout(() => {
      //   for (let i = 0; i < 30; i++) {
      //     this.list.push(this.list.length + 1)
      //   }

      //   // 加载状态结束
      //   this.loading = false

      //   // 数据全部加载完成
      //   if (this.list.length >= 40) {
      //     this.finished = true
      //   }
      // }, 1000)
      const res = await addressApi(this.limit)
      if (res.data.code === 200) {
        // this.addressList = [...this.addressList, ...res.data.data.list]
        this.addressList = res.data.data.list
      }
      this.loading = false
      if (this.loading === false) {
        this.limit = this.limit + 5
      }
      if (res.data.data.total === 0) {
        this.finished = true
      }
    }
  }
}
</script>

<style lang="less" scoped>
.home {
}
.searchBar {
  padding: 0 10px;
  background-color: #fff;

  position: sticky;
  top: 0;
  left: 0;
  z-index: 999;
  .top-box {
    display: flex;

    .van-search {
      flex: 1;
    }
  }
  // 过滤盒子
  .filter-box {
    margin-top: 20px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    .left-box {
      span {
        margin-right: 40px;
      }
    }
  }
  // 数据列表
  .custom-title {
    margin-right: 4px;
    vertical-align: middle;
  }

  .search-icon {
    font-size: 16px;
    line-height: inherit;
  }
}
.company-detail {
  h4 {
    margin: 0px 0;
  }
  display: flex;
  .top-box {
    flex: 1;
    display: flex;
    justify-content: space-between;
  }
  .propleNumber {
    color: #53b5da;
  }
}
</style>
